<template>

	<view class="mine">
	
		<u-navbar
			title=""
			:border-bottom="false"  
			:is-back="false"
			:background="backgroundStyle"
		>
		<view class="navbar__right" slot="right">
<!-- 			<view class="navbar__right__scan">
				<u-icon name="scan"></u-icon>
			</view> -->
			<view class="navbar__right__setting" @click="scan()">
				<!-- <u-icon name="/static/icon/setting.svg"></u-icon> -->
				<image class="navbar__right__setting__icon" src="/static/icon/scan.svg" mode="aspectFit"></image>
			</view>
			<view class="navbar__right__setting" @click="toSettingPage()">
				<!-- <u-icon name="/static/icon/setting.svg"></u-icon> -->
				<image class="navbar__right__setting__icon" src="/static/icon/setting.svg" mode="aspectFit"></image>
			</view>
		</view>
		</u-navbar>
		

		<view class="user-box" >
			<view class="user-box__avatar" style="  display: flex; ">
				<u-avatar :src="userInfo.avatarUrl" size="110" style="margin-right: 10px;"></u-avatar>
				<view class="user-box__info"style="display: flex; flex-direction: column;">
					<view class="user-box__info__username">{{userInfo.nickname}}</view>
					<view class="user-box__info__realname">{{userInfo.realName}} </view>
				</view>
			</view>
			<!-- <u-icon name="setting-fill" size="50" style="padding-right: 30px;"></u-icon> -->
			<view class="user-box__tohome" @click="openPage('/pages/core/mine/mySpace')"> 
				<view>个人主页</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
<!-- 	<view class="option-box">
		<u-cell-group  title-bg-color="rgb(243, 244, 246)" :border="false" >
			<u-cell-item 
				:icon="item1.icon" 
				@click="openPage(item1.path)" 
				:title="item1.title"
				:border-bottom="false" 
				:border-top="false"
			v-for="(item1, index) in celllist" :key="index" >
			</u-cell-item>
		</u-cell-group>
	</view> -->
	<view class="rechargeCard" >
			<image  
				src="/static/mine/rechargeCard.svg" 
				mode="widthFix" 
				@click="openPage('/pages/core/mine/rechargeCard/rechargeCard')"
				class="rechargeCard__image"></image>
	</view>
	<view class="option-box">
		<view class="option-box__title">个人设置</view>
		<view class="option-box__cell" v-for="(item,index) in celllist" @click="openPage(item.path)">
			<view class="option-box__cell__icon">
				<image class="navbar__right__setting__icon" :src="item.icon" mode="aspectFit"></image>
			</view>
			<view class="option-box__cell__right">
				<view class="option-box__cell__right__title">{{item.title}}</view>
				<view class="option-box__cell__right__icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
		
<!-- 		<view class="mine__func">
			<u-cell-group>
				<u-cell-item class="m
				ine__func__item" center="true" border-bottom="false" border-top="false" icon="home" title="我的空间"></u-cell-item>
				<u-cell-item class="mine__func__item" border-bottom="false" border-top="false" icon="phone" title="通讯录"></u-cell-item>
				<u-cell-item class="mine__func__item" border-bottom="false" border-top="false" icon="coupon" title="园区切换"></u-cell-item>
				<u-cell-item class="mine__func__item" icon="grid" title="园区应用"></u-cell-item>
				<u-cell-item class="mine__func__item" icon="account" title="个人资料"></u-cell-item>
				
			</u-cell-group>
		</view> -->
		

		<u-tabbar :list="this.$store.state.tabbarList" 
			:active-color="this.$store.state.tabbarConfig.activeColor"
			:inactive-color="this.$store.state.tabbarConfig.inactiveColor"
			:border-top="this.$store.state.tabbarConfig.borderTop"	></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundStyle:{'backgroundColor':'transparent'},
				// pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F18%2F20180818161301_ruicu.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622709638&t=1d1aedf3caf6a31834f1dc9545688760",
				// username:"username",
				// realname:"张三",
				celllist:[
					// {
					// 	path: '/pages/core/mine/mySpace',
					// 	icon:'home',
					// 	title:'我的空间',
					// },
					{
						path: '/pages/core/mine/authorityManagement/authorityManagement',
						icon:'/static/mine/role.svg',
						title:'权限管理',
					},
					// {
					// 	path: '/pages/core/mine/bill',
					// 	icon:'/static/mine/role',
					// 	title:'账单信息',
					// },
					{
						path: '/pages/core/mine/myInfomation',
						icon:'/static/mine/mine.svg',
						title:'个人资料',
					},
					{
						path: '/pages/core/mine/enterprise/myEnterprise',
						icon:'/static/mine/businessCard.svg',
						title:'企业名片',
					},
					{
						path: '/pages/core/mine/submitSuggestion',
						icon:'/static/mine/complain.svg',
						title:'投诉',
					},
					{
						path: '/pages/core/mine/rechargeCard/cardInfo',
						icon:'/static/mine/complain.svg',
						title:'我的月卡',
					},
				]
			}
		},
		computed:{
			userInfo:function(){
				console.log("computed:userInfo",this.$store.state.userInfo)
				return this.$store.state.userInfo
			}
		},
		methods: {
			openPage(path){
				 uni.navigateTo({
					 url:path
				 })
			},
			toSettingPage(){
				uni.navigateTo({
					url:"/pages/core/mine/setting/setting"
				})
			},
			scan(){
				// uni.scanCode({
				//     success: function (res) {
				//         console.log('条码类型：' + res.scanType);
				//         console.log('条码内容：' + res.result);
				//     }
				// });
				uni.navigateTo({
					url:"/pages/core/mine/barriergate/barriergate"
				})
			}

		}
	}
</script>

<style lang="less">
.mine{
	display: flex;
	flex-direction: column;
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
}
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;
		
		&__scan{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
		&__setting{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
			&__icon {
				width:@icon-lg;
				height: @icon-lg;
			}
		}
	}
}
.user-box{
	display: flex; 
	justify-content:space-between ; 
	align-items: flex-start;
	padding: @uni-spacing-row-sm 2*@uni-spacing-col-lg  2*@uni-spacing-row-lg 2*@uni-spacing-col-lg;
	
	// background-color: #fff;
	&__info{
		&__username{
			font-size: large;
			font-weight: bold;
		}
		&__realname{
			font-size: small;
			color: #808080;
		}
	}
	&__tohome{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: @uni-font-size-sm;
		// color: @font-color-blue;
	}
}
.rechargeCard{
	display: flex;
	flex-direction: column;
	padding: 0 @uni-spacing-col-lg;
	align-items: center;
	&__image{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}
.option-box{
	display: flex;
	flex-direction: column;
	border-radius: @uni-border-radius-lg;
	// padding: @uni-spacing-row-base @uni-spacing-col-base;
	// margin: @uni-spacing-row-base @uni-spacing-col-base;
	// margin-top: @uni-spacing-row-sm;
	background-color: #fff;
	flex:1;
	&__title{
		margin: @uni-spacing-row-base @uni-spacing-col-lg;
		// font-size: larger;
		// font-weight: bold;
		color:@font-color-grey;
	}
	&__cell{
		display: flex;
		flex-direction: row;
		align-items: center;
		&__icon{
			height: @icon-lg;
			width: @icon-lg;
			margin:@uni-spacing-row-base @uni-spacing-col-lg;
			
		}
		&__right{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex: 1;
			padding-top: @uni-spacing-row-lg;
			padding-bottom: @uni-spacing-row-lg;
			font-size: @uni-font-size-lg;
			
			border-bottom: @line-light-size solid @uni-border-color;
			&__icon{
				margin-right: @uni-spacing-col-lg;
				color: @font-color-grey-light;
			}
		}
	}
}

</style>
